<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>个人订单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<style>
		.mui-card .mui-control-content {
			padding: 10px;
		}
		.mui-control-content {
			height: 150px;
		}
		.mui-table-view>.mui-table-view-cell{
			text-align: center;
		}
		.mui-table-view>.mui-table-view-cell:first-child{
		background-color:#EEF9FD !important ;
    	}
    	.mui-table-view-chevron .mui-table-view-cell{
    		padding-right:10px;
    	}
    	.mui-table-view>.mui-table-view-cell>span:first-child{
    		width: 25%;
    	}
    	.mui-table-view>.mui-table-view-cell>span:last-child{
    		width: 45%;
    	}
		</style>
	</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">个人订单</h1>
	</header>
	<div class="mui-content">
		<span class="mui-content-head">订单列表</span>
		<div style="padding: 0px 10px 10px;">
			<div id="segmentedControl" class="mui-segmented-control">
				<a class="mui-control-item mui-active" href="#item1">
				已支付订单
				</a>
				<a class="mui-control-item" href="#item2">
				未支付订单
				</a>
			</div>
		</div>
		<div>
			<div id="item1" class="mui-control-content mui-active">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<span class="mui-pull-left">订单号</span>
						<span class="mui-pull-center">订单金额</span>
						<span class="mui-pull-right">管理</span>
					</li>
					<li class="mui-table-view-cell">
						<span class="mui-pull-left">A123-12</span>
						<span class="mui-pull-center">256</span>
						<span class="mui-pull-right"><a href="#">订单详情</a></span>
					</li>
					<li class="mui-table-view-cell">
						<span class="mui-pull-left">A123-12</span>
						<span class="mui-pull-center">256</span>
						<span class="mui-pull-right"><a href="#">订单详情</a></span>
					</li>
					<li class="mui-table-view-cell">
						<span class="mui-pull-left">A123-12</span>
						<span class="mui-pull-center">256</span>
						<span class="mui-pull-right"><a href="#">订单详情</a></span>
					</li>
				</ul>					
			</div>
			<div id="item2" class="mui-control-content">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<span class="mui-pull-left">订单号</span>
						<span class="mui-pull-center">订单金额</span>
						<span class="mui-pull-right">管理</span>
					</li>
					<li class="mui-table-view-cell">
						<span class="mui-pull-left">A123-12</span>
						<span class="mui-pull-center">256</span>
						<span class="mui-pull-right"><a href="#" >查看</a> <a href="pay.html">支付</a> <a href="#">删除</a></span>
					</li>
					<li class="mui-table-view-cell">
						<span class="mui-pull-left">A123-12</span>
						<span class="mui-pull-center">256</span>
						<span class="mui-pull-right"><a href="#">查看</a> <a href="beecloud.html">支付</a> <a href="#">删除</a></span>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<script src="js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
//			(function($) {
//				$('#scroll').scroll({
//					indicators: true //是否显示滚动条
//				});
//				var segmentedControl = document.getElementById('segmentedControl');
//				$('.mui-input-group').on('change', 'input', function() {
//					if (this.checked) {
//						var styleEl = document.querySelector('input[name="style"]:checked');
//						var colorEl = document.querySelector('input[name="color"]:checked');
//						if (styleEl && colorEl) {
//							var style = styleEl.value;
//							var color = colorEl.value;
//							segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
//						}
//					}
//				});
//			})(mui);
	</script>
</body>

</html>